<!DOCTYPE HTML>
<html lang="zh-CN">


<head>
    <meta charset="utf-8">
    <meta name="keywords" content="HTTISHERE">
    <meta name="description" content="">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="renderer" content="webkit|ie-stand|ie-comp">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <!-- Global site tag (gtag.js) - Google Analytics -->


    <title>HTTISHERE</title>
    <link rel="icon" type="image/x-icon, image/vnd.microsoft.icon" href="/favicon.ico">

    <link rel="stylesheet" type="text/css" href="/libs/awesome/css/all.css">
    <link rel="stylesheet" type="text/css" href="/libs/materialize/materialize.min.css">
    <link rel="stylesheet" type="text/css" href="/libs/aos/aos.css">
    <link rel="stylesheet" type="text/css" href="/libs/animate/animate.min.css">
    <link rel="stylesheet" type="text/css" href="/libs/lightGallery/css/lightgallery.min.css">
    <link rel="stylesheet" type="text/css" href="/css/matery.css">
    <link rel="stylesheet" type="text/css" href="/css/my.css">

    <script src="/libs/jquery/jquery.min.js"></script>

<meta name="generator" content="Hexo 5.2.0"></head>




<body>
    <header class="navbar-fixed">
    <nav id="headNav" class="bg-color nav-transparent">
        <div id="navContainer" class="nav-wrapper container">
            <div class="brand-logo">
                <a href="/" class="waves-effect waves-light">
                    
                    <img src="/medias/avatar.png" class="logo-img" alt="LOGO">
                    
                    <span class="logo-span">HTTISHERE</span>
                </a>
            </div>
            

<a href="#" data-target="mobile-nav" class="sidenav-trigger button-collapse"><i class="fas fa-bars"></i></a>
<ul class="right nav-menu">
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/" class="waves-effect waves-light">
      
      <i class="fas fa-home" style="zoom: 0.6;"></i>
      
      <span>首页</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/tags" class="waves-effect waves-light">
      
      <i class="fas fa-tags" style="zoom: 0.6;"></i>
      
      <span>标签</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/categories" class="waves-effect waves-light">
      
      <i class="fas fa-bookmark" style="zoom: 0.6;"></i>
      
      <span>分类</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/archives" class="waves-effect waves-light">
      
      <i class="fas fa-archive" style="zoom: 0.6;"></i>
      
      <span>归档</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/about" class="waves-effect waves-light">
      
      <i class="fas fa-user-circle" style="zoom: 0.6;"></i>
      
      <span>关于</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/friends" class="waves-effect waves-light">
      
      <i class="fas fa-address-book" style="zoom: 0.6;"></i>
      
      <span>友情链接</span>
    </a>
    
  </li>
  
  <li>
    <a href="#searchModal" class="modal-trigger waves-effect waves-light">
      <i id="searchIcon" class="fas fa-search" title="搜索" style="zoom: 0.85;"></i>
    </a>
  </li>
</ul>


<div id="mobile-nav" class="side-nav sidenav">

    <div class="mobile-head bg-color">
        
        <img src="/medias/avatar.png" class="logo-img circle responsive-img">
        
        <div class="logo-name">HTTISHERE</div>
        <div class="logo-desc">
            
            Never really desperate, only the lost of the soul.
            
        </div>
    </div>

    

    <ul class="menu-list mobile-menu-list">
        
        <li class="m-nav-item">
	  
		<a href="/" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-home"></i>
			
			首页
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/tags" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-tags"></i>
			
			标签
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/categories" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-bookmark"></i>
			
			分类
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/archives" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-archive"></i>
			
			归档
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/about" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-user-circle"></i>
			
			关于
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/friends" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-address-book"></i>
			
			友情链接
		</a>
          
        </li>
        
        
    </ul>
</div>


        </div>

        
    </nav>

</header>

    
<style>
    .carousel-control {
        width: 45px;
        height: 45px;
        line-height: 55px;
        border-radius: 45px;
        background: transparent;
        cursor: pointer;
        z-index: 100;
    }

    #prev-cover {
        position: absolute;
        top: 48%;
        left: 8px;
    }

    #next-cover {
        position: absolute;
        top: 48%;
        right: 8px;;
    }

    #prev-cover i {
        margin-right: 3px;
    }

    #next-cover i {
        margin-left: 3px;
    }

    .carousel-control:hover {
        background-color: rgba(0, 0, 0, .4);
    }

    .carousel-control i {
        color: #fff;
        font-size: 2.4rem;
    }
</style>



<div class="carousel carousel-slider center index-cover" data-indicators="true" style="margin-top: -64px;">
    
        <div id="prev-cover" class="left waves-effect carousel-control">
            <i class="icon fa fa-angle-left"></i>
        </div>
        <div id="next-cover" class="right waves-effect carousel-control">
            <i class="icon fa fa-angle-right"></i>
        </div>
    

    <div class="carousel-item red white-text bg-cover about-cover">
        <div class="container">
            <div class="row">
    <div class="col s10 offset-s1 m8 offset-m2 l8 offset-l2">
        <div class="brand">
            <div class="title center-align">
                
                HTTISHERE · 阿汪同学
                
            </div>

            <div class="description center-align">
                
                <span id="subtitle"></span>
                <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script>
                <script>
                    var typed = new Typed("#subtitle", {
                        strings: ['Life was like a box of chocolates, you never know what you\’re gonna get.\n生命就像一盒巧克力\，结果往往出人意料。','I don\’t know if we each have a destiny, or if we\’re all just floating around accidentally―like on a breeze.\n我不懂我们是否有着各自的命运\，还是只是到处随风飘荡。'],
                        startDelay: 300,
                        typeSpeed: 100,
                        loop: true,
                        backSpeed: 50,
                        showCursor: true
                    });
                </script>
                
            </div>
        </div>
    </div>
</div>


<script>
    $('.bg-cover').css('background-image', 'url(/medias/banner/0.jpg)');
</script>



            <div class="cover-btns">
                <a href="#articles" class="waves-effect waves-light btn">
                    <i class="fa fa-angle-double-down"></i>开始阅读
                </a>

                
                    <a href="https://github.com/httIsHere" class="waves-effect waves-light btn" target="_blank">
                        <i class="fab fa-github-alt"></i>Github
                    </a>
                
            </div>
            <div class="cover-social-link">
    <a href="https://github.com/httIsHere" class="tooltipped" target="_blank" data-tooltip="访问我的GitHub" data-position="top" data-delay="50">
        <i class="fab fa-github"></i>
    </a>



    <a href="mailto:httishere0728@gmail.com" class="tooltipped" target="_blank" data-tooltip="邮件联系我" data-position="top" data-delay="50">
        <i class="fas fa-envelope-open"></i>
    </a>













</div>
        </div>
    </div>

    
        

        
            
            <div class="carousel-item amber white-text carousel-post bg-cover"
                 style="background-image: url('/medias/featureimages/cover-bg-3.jpg');">
                <div class="container">
                    <div class="row">
                        <div class="col s10 offset-s1">
                            <div class="title center-align">💟 汪汪周刊 002期：如何保持稳定输出</div>
                            <div class="description center-align">
                                
                                    
Hello，大家好，这里是阿汪同学。本期关键词： 锡兰牛乳茶前提我今年的打算是可以有稳定的输入输出，不要再三分热度，但是如何保持稳定的输入输出是一个问题。
还有很多人正常输入是没问题的但是不会输入，就像我知识在脑子里但是需要去传达给别人的
                                
                            </div>
                            <div class="cover-btns">
                                <a href="/2023/02/06/notion/06e490bd52654fc/" class="waves-effect waves-light btn"
                                   target="_blank">
                                    <i class="icon fa fa-eye fa-fw"></i>阅读更多
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        
            
            <div class="carousel-item amber white-text carousel-post bg-cover"
                 style="background-image: url('https://htt-pics.oss-cn-beijing.aliyuncs.com/blog/2.png');">
                <div class="container">
                    <div class="row">
                        <div class="col s10 offset-s1">
                            <div class="title center-align">▪️ Notion公式2.0扫盲教程vol.01 - 基本数据类型（一）</div>
                            <div class="description center-align">
                                
                                    
该系列将会持续更新，我会整理以及和大家分享我平时的常用公式
Notion 公式是 Database 数据库最重要的功能之一，在 Notion 数据库中，我们可以通过添加一个公式属性，来基于其他属性进行运行各种计算和函数，来操作现有数据并得
                                
                            </div>
                            <div class="cover-btns">
                                <a href="/2024/04/19/notion/4460b8e226bf4f3/" class="waves-effect waves-light btn"
                                   target="_blank">
                                    <i class="icon fa fa-eye fa-fw"></i>阅读更多
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        
            
            <div class="carousel-item amber white-text carousel-post bg-cover"
                 style="background-image: url('/medias/featureimages/cover-bg-1.jpg');">
                <div class="container">
                    <div class="row">
                        <div class="col s10 offset-s1">
                            <div class="title center-align">💟 汪汪周刊 004期：怎么停止精神内耗</div>
                            <div class="description center-align">
                                
                                    
Hello，大家好，这里是阿汪同学。本期关键词： 焦糖布丁前提每天晚上睡觉前总会
‼️ 本周刊非纯技术周刊，包括各方面的分享。
有趣的工具专业技术领域Widverse · 汪汪汪世界
Widverse 是我开发的组件库，支持嵌入 Noti
                                
                            </div>
                            <div class="cover-btns">
                                <a href="/2023/02/20/notion/365de9a2d274438/" class="waves-effect waves-light btn"
                                   target="_blank">
                                    <i class="icon fa fa-eye fa-fw"></i>阅读更多
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        
            
            <div class="carousel-item amber white-text carousel-post bg-cover"
                 style="background-image: url('https://images.unsplash.com/photo-1545344262-82978a5099f6?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb');">
                <div class="container">
                    <div class="row">
                        <div class="col s10 offset-s1">
                            <div class="title center-align">▪️ 用Notion Collector快捷摘录网页内容到自己的Notion吧！</div>
                            <div class="description center-align">
                                
                                    
‼️ 本插件目前仅支持 Chrome（谷歌浏览器）v115 以上使用！

背景
因为在日常的工作学习中经常需要看一些技术文章，官方文档或者 Bug 解决方法文章，原来也一直在使用 Notion 出的 Notion Web Clipper 
                                
                            </div>
                            <div class="cover-btns">
                                <a href="/2024/04/12/notion/4d54c7a3a5144ce/" class="waves-effect waves-light btn"
                                   target="_blank">
                                    <i class="icon fa fa-eye fa-fw"></i>阅读更多
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        
            
            <div class="carousel-item amber white-text carousel-post bg-cover"
                 style="background-image: url('https://htt-pics.oss-cn-beijing.aliyuncs.com/blog/famingjia-inventor-LcgyBUwbvGU-unsplash%20(1).jpg');">
                <div class="container">
                    <div class="row">
                        <div class="col s10 offset-s1">
                            <div class="title center-align">▪️ 【Notion】同步博客图片过期？！阿里云OSS+PicGo搭建自己的高性能图床</div>
                            <div class="description center-align">
                                
                                    背景我一直是以 Notion 作为我写博客的编辑器，然后为了防止由于 notion 访问状态不佳导致无法查看，所以我通过 Notion API 将我的文章内容拉取到本地直接同步推送到我的个人博客站点，但是一直有一个问题就是 Notion 上
                                
                            </div>
                            <div class="cover-btns">
                                <a href="/2024/04/17/notion/5684d5528edd49c/" class="waves-effect waves-light btn"
                                   target="_blank">
                                    <i class="icon fa fa-eye fa-fw"></i>阅读更多
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        
            
            <div class="carousel-item amber white-text carousel-post bg-cover"
                 style="background-image: url('https://cn.bing.com/th?id=OHR.GrandCanyonWinter_ZH-CN2640803517_1920x1080.jpg');">
                <div class="container">
                    <div class="row">
                        <div class="col s10 offset-s1">
                            <div class="title center-align">💟 汪汪2024周刊 001期：女性话语权</div>
                            <div class="description center-align">
                                
                                    Hello，大家好，这里是阿汪同学｜本期关键词： 桂花乌龙前提‼️ 本周刊非纯技术周刊，包括各方面的分享和碎碎念。
有趣的
成功第二次水光针
这月打针 ✅
成功更新了本博客的主题风格，看着这么好看的博客后面要多多输出呀

工具
中文播客网：
                                
                            </div>
                            <div class="cover-btns">
                                <a href="/2024/04/16/notion/9cb282a6255f4e5/" class="waves-effect waves-light btn"
                                   target="_blank">
                                    <i class="icon fa fa-eye fa-fw"></i>阅读更多
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        
            
            <div class="carousel-item amber white-text carousel-post bg-cover"
                 style="background-image: url('https://www.notion.so/images/page-cover/met_winslow_homer_maine_coast.jpg');">
                <div class="container">
                    <div class="row">
                        <div class="col s10 offset-s1">
                            <div class="title center-align">💘 再见2023，当时只道是寻常</div>
                            <div class="description center-align">
                                
                                    〉》〉》 坚持就是胜利 ✌️！
工作&amp;学习
💡 经历了差不多一年半居家办公的日子，很轻松是真的，很焦虑和懒散也是真的。焦虑的是工作并不多，懒散的是就是这么不是很饱和的情况下也没有多学习。

爱好今年粉丝也涨了几万了，相关收入居然 
                                
                            </div>
                            <div class="cover-btns">
                                <a href="/2024/01/06/notion/ac3f15468e4443c/" class="waves-effect waves-light btn"
                                   target="_blank">
                                    <i class="icon fa fa-eye fa-fw"></i>阅读更多
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        
            
            <div class="carousel-item amber white-text carousel-post bg-cover"
                 style="background-image: url('https://htt-pics.oss-cn-beijing.aliyuncs.com/blog/20220515230917_26358.jpg');">
                <div class="container">
                    <div class="row">
                        <div class="col s10 offset-s1">
                            <div class="title center-align">💟 汪汪2024周刊 002期：</div>
                            <div class="description center-align">
                                
                                    Hello，大家好，这里是阿汪同学｜本期关键词： 抹茶干酪贝果‼️ 本周刊非纯技术周刊，包括各方面的分享。
有趣的
这周第二次去做了光子嫩肤，做之前做了一个皮肤检测，和上个月对比底层的色素少了很多，好开心呀，希望后面好好的把我的底层炎症和痘
                                
                            </div>
                            <div class="cover-btns">
                                <a href="/2024/04/22/notion/a7a8a9b26c8b4d4/" class="waves-effect waves-light btn"
                                   target="_blank">
                                    <i class="icon fa fa-eye fa-fw"></i>阅读更多
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        
            
            <div class="carousel-item amber white-text carousel-post bg-cover"
                 style="background-image: url('/medias/featureimages/cover-bg-5.jpg');">
                <div class="container">
                    <div class="row">
                        <div class="col s10 offset-s1">
                            <div class="title center-align">💟 汪汪周刊 001期： 新年再出发</div>
                            <div class="description center-align">
                                
                                    
Hello，大家好，这里是阿汪同学。本期关键词： 蔓越莓曲奇前提我以前也有想过做一些平时的学习分享，但是基本都没有坚持下来，再者去年的特殊情况使我的工作学习都进入了一个停滞状态，新的一年我想重新出发，和大家一起共同成长。
同时想通过做这个
                                
                            </div>
                            <div class="cover-btns">
                                <a href="/2023/01/30/notion/c27da161a208489/" class="waves-effect waves-light btn"
                                   target="_blank">
                                    <i class="icon fa fa-eye fa-fw"></i>阅读更多
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        
            
            <div class="carousel-item amber white-text carousel-post bg-cover"
                 style="background-image: url('/medias/featureimages/cover-bg-5.jpg');">
                <div class="container">
                    <div class="row">
                        <div class="col s10 offset-s1">
                            <div class="title center-align">https://www.notion.so/icons/branch_gray.svg Notion</div>
                            <div class="description center-align">
                                
                                    该系列将会持续更新，我会整理以及和大家分享我平时的常用公式
Notion 公式是 Database 数据库最重要的功能之一，在 Notion 数据库中，我们可以通过添加一个公式属性，来基于其他属性进行运行各种计算和函数，来操作现有数据并得出
                                
                            </div>
                            <div class="cover-btns">
                                <a href="/2023/03/31/notion/e7cc256e34a7482/" class="waves-effect waves-light btn"
                                   target="_blank">
                                    <i class="icon fa fa-eye fa-fw"></i>阅读更多
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        
            
            <div class="carousel-item amber white-text carousel-post bg-cover"
                 style="background-image: url('/medias/featureimages/cover-bg-6.jpg');">
                <div class="container">
                    <div class="row">
                        <div class="col s10 offset-s1">
                            <div class="title center-align">💟 汪汪周刊 003期：如何突破自己的学习瓶颈</div>
                            <div class="description center-align">
                                
                                    
Hello，大家好，这里是阿汪同学。本期关键词： 星空葡萄前提前几天在逛掘金的时候，看到了一篇大哥写的文章《如何突破技术瓶颈（适合 P6 以下）》，特别有感触，其实毕业后没多久就碰上了疫情导致在工作上一直处于舒适圈也没有突破，一直想学习精
                                
                            </div>
                            <div class="cover-btns">
                                <a href="/2023/02/13/notion/f232c878e4f8449/" class="waves-effect waves-light btn"
                                   target="_blank">
                                    <i class="icon fa fa-eye fa-fw"></i>阅读更多
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        
            
            <div class="carousel-item amber white-text carousel-post bg-cover"
                 style="background-image: url('https://cn.bing.com/th?id=OHR.ModicaItaly_ZH-CN3893147952_1920x1080.jpg');">
                <div class="container">
                    <div class="row">
                        <div class="col s10 offset-s1">
                            <div class="title center-align">「Daily」hexo博客使用gitalk时授权登录时403问题</div>
                            <div class="description center-align">
                                
                                    场景最近在更新我的博客主题所以重构了很多内容，其中包括 gitalk。但是在部署完博客后发现使用文章下 gitalk 进行授权登录时报 403 错误。
解决
参考方法：https://cuiqingcai.com/30010.html

主
                                
                            </div>
                            <div class="cover-btns">
                                <a href="/2024/04/16/yuque/ewrpyfnohrzvrpmx/" class="waves-effect waves-light btn"
                                   target="_blank">
                                    <i class="icon fa fa-eye fa-fw"></i>阅读更多
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        
    
</div>

<script>
    $(function () {
        let coverSlider = $('.carousel');

        //用户触摸轮播自动 restartPlay 是否生效
        let initUserPressedOrDraggedActive = false

        //用户触摸轮播自动 restartPlay
        function initUserPressedOrDragged(instance) {
            setInterval(() => {
                if (instance.pressed || instance.dragged) {
                    // console.log('initUserPressedOrDragged: ',instance.pressed,instance.dragged)
                    restartPlay()
                }
            }, 1000)
        }

        coverSlider.carousel({
            duration: Number('120'),
            fullWidth: true,
            indicators: 'true' === 'true',
            onCycleTo() {
                if (!initUserPressedOrDraggedActive) {
                    // console.log('initUserPressedOrDraggedActive')
                    initUserPressedOrDragged(this)
                    initUserPressedOrDraggedActive = true
                }
            },
        })

        let carouselIntervalId;
        
        // Loop to call the next cover article picture.
        let autoCarousel = function () {
            carouselIntervalId = setInterval(function () {
                coverSlider.carousel('next');
            }, 5000);
        };
        autoCarousel();
        

        function restartPlay() {
            
            clearInterval(carouselIntervalId);
            autoCarousel();
            
        };

        
        // prev and next cover post.
        $('#prev-cover').click(function () {
            coverSlider.carousel('prev');
            restartPlay();
        });
        $('#next-cover').click(function () {
            coverSlider.carousel('next');
            restartPlay();
        });
        
    });
</script>



<main class="content">

    
    <div id="indexCard" class="index-card">
        <div class="container ">
            <div class="card">
                <div class="card-content">
                    

                    

                    

                    
                    <div id="recommend-sections" class="recommend">
                        





<div class="title"><i class="far fa-thumbs-up"></i>&nbsp;&nbsp;推荐文章</div>

<div class="row">

    
    
    <div class="col s12" >
        
            <div class="post-card" style="background-image: url('/medias/featureimages/cover-bg-6.jpg')">
            
            <div class="post-body">
                <div class="post-categories">
                    
                        
                            <a href="/categories/LeeCode/" class="category">LeeCode</a>
                        
                    
                </div>
                <a href="/2021/10/13/LeeCode-by-JS/">
                    <h3 class="post-title">LeeCode题解记录（JavaScript版）</h3>
                </a>
                <p class="post-description">
github地址

~~ 2023.02 ~~
[55] Jump Game
[989] Add to Array-Form of Integer
[693] Bina</p>
                <a href="/2021/10/13/LeeCode-by-JS/" class="read-more btn waves-effect waves-light" style="background: linear-gradient(to right, #f4ad5e 0%, #ffc68c 100%)" target="_blank">
                    <i class="icon far fa-eye fa-fw"></i>阅读更多
                </a>
            </div>
        </div>
    </div>
    
    
    <div class="col s12 m6" data-aos="zoom-in-up">
        
            <div class="post-card" style="background-image: url('/medias/featureimages/cover-bg-5.jpg')">
            
            <div class="post-body">
                <div class="post-categories">
                    
                        
                            <a href="/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/" class="category">大前端</a>
                        
                    
                </div>
                <a href="/2021/11/19/Stack/">
                    <h3 class="post-title">Vue &amp; React 目录</h3>
                </a>
                <p class="post-description">
Categories · React
Categories · Vue

</p>
                <a href="/2021/11/19/Stack/" class="read-more btn waves-effect waves-light" style="background: linear-gradient(to right, #8e83a9 0%, #c9c3de 100%)" target="_blank">
                    <i class="icon far fa-eye fa-fw"></i>阅读更多
                </a>
            </div>
        </div>
    </div>
    
    
    <div class="col s12 m6" data-aos="zoom-in-up">
        
            <div class="post-card" style="background-image: url('/medias/featureimages/cover-bg-5.jpg')">
            
            <div class="post-body">
                <div class="post-categories">
                    
                        
                            <a href="/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/" class="category">大前端</a>
                        
                    
                </div>
                <a href="/2021/11/19/my-f-training/">
                    <h3 class="post-title">「ROAD 6」 前端训练目录</h3>
                </a>
                <p class="post-description">
知识框架
编程语言通识与JavaScript语言设计
词法类型
表达式与类型转换
语句
对象
结构化程序设计


浏览器原理
浏览器原理-</p>
                <a href="/2021/11/19/my-f-training/" class="read-more btn waves-effect waves-light" style="background: linear-gradient(to right, #c8cfc8 0%, #b3bdb0 100%)" target="_blank">
                    <i class="icon far fa-eye fa-fw"></i>阅读更多
                </a>
            </div>
        </div>
    </div>
    

</div>


                    </div>
                    
                </div>
            </div>
        </div>
    </div>
    

    

    <!-- 所有文章卡片 -->
    <article id="articles" class="container articles">
        <div class="row article-row">
            
            <div class="article col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="/2024/04/22/notion/a7a8a9b26c8b4d4/">
                        <div class="card-image">
                            
                            <img src="https://htt-pics.oss-cn-beijing.aliyuncs.com/blog/20220515230917_26358.jpg" class="responsive-img" alt="💟 汪汪2024周刊 002期：">
                            
                            <span class="card-title">💟 汪汪2024周刊 002期：</span>
                        </div>
                    </a>

                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            
                            Hello，大家好，这里是阿汪同学｜本期关键词： 抹茶干酪贝果‼️ 本周刊非纯技术周刊，包括各方面的分享。
有趣的
这周第二次去做了光子嫩肤，做之前做了一个皮肤检测，和上个月对比底层的色素少了很多，好开心呀，希望后面好好的把我的底层炎症和痘
                            
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2024-04-22
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-bookmark fa-fw icon-category"></i>
                                
                                <a href="/categories/%E5%91%A8%E5%88%8A/" class="post-category">
                                    周刊
                                </a>
                                
                                
                            </span>
                        </div>
                    </div>

                    
                    <div class="card-action article-tags">
                        
                        <a href="/tags/%E6%AF%8F%E5%91%A8%E5%88%86%E4%BA%AB/">
                            <span class="chip bg-color">每周分享</span>
                        </a>
                        
                    </div>
                    
                </div>
            </div>
            
            <div class="article col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="/2024/04/19/notion/4460b8e226bf4f3/">
                        <div class="card-image">
                            
                            <img src="https://htt-pics.oss-cn-beijing.aliyuncs.com/blog/2.png" class="responsive-img" alt="▪️ Notion公式2.0扫盲教程vol.01 - 基本数据类型（一）">
                            
                            <span class="card-title">▪️ Notion公式2.0扫盲教程vol.01 - 基本数据类型（一）</span>
                        </div>
                    </a>

                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            
                            
该系列将会持续更新，我会整理以及和大家分享我平时的常用公式
Notion 公式是 Database 数据库最重要的功能之一，在 Notion 数据库中，我们可以通过添加一个公式属性，来基于其他属性进行运行各种计算和函数，来操作现有数据并得
                            
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2024-04-19
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-bookmark fa-fw icon-category"></i>
                                
                                <a href="/categories/Notion/" class="post-category">
                                    Notion
                                </a>
                                
                                
                            </span>
                        </div>
                    </div>

                    
                    <div class="card-action article-tags">
                        
                        <a href="/tags/Notion/">
                            <span class="chip bg-color">Notion</span>
                        </a>
                        
                        <a href="/tags/Notion-Formula/">
                            <span class="chip bg-color">Notion Formula</span>
                        </a>
                        
                    </div>
                    
                </div>
            </div>
            
            <div class="article col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="/2024/04/17/notion/5684d5528edd49c/">
                        <div class="card-image">
                            
                            <img src="https://htt-pics.oss-cn-beijing.aliyuncs.com/blog/famingjia-inventor-LcgyBUwbvGU-unsplash%20(1).jpg" class="responsive-img" alt="▪️ 【Notion】同步博客图片过期？！阿里云OSS+PicGo搭建自己的高性能图床">
                            
                            <span class="card-title">▪️ 【Notion】同步博客图片过期？！阿里云OSS+PicGo搭建自己的高性能图床</span>
                        </div>
                    </a>

                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            
                            背景我一直是以 Notion 作为我写博客的编辑器，然后为了防止由于 notion 访问状态不佳导致无法查看，所以我通过 Notion API 将我的文章内容拉取到本地直接同步推送到我的个人博客站点，但是一直有一个问题就是 Notion 上
                            
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2024-04-17
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-bookmark fa-fw icon-category"></i>
                                
                                <a href="/categories/%E5%BC%80%E5%8F%91/" class="post-category">
                                    开发
                                </a>
                                
                                
                            </span>
                        </div>
                    </div>

                    
                    <div class="card-action article-tags">
                        
                        <a href="/tags/Notion/">
                            <span class="chip bg-color">Notion</span>
                        </a>
                        
                        <a href="/tags/Daily/">
                            <span class="chip bg-color">Daily</span>
                        </a>
                        
                    </div>
                    
                </div>
            </div>
            
            <div class="article col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="/2024/04/16/yuque/ewrpyfnohrzvrpmx/">
                        <div class="card-image">
                            
                            
                            <img src="/medias/featureimages/cover-bg-6.jpg" class="responsive-img"
                                alt="「Daily」hexo博客使用gitalk时授权登录时403问题">
                            
                            <span class="card-title">「Daily」hexo博客使用gitalk时授权登录时403问题</span>
                        </div>
                    </a>

                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            
                            场景最近在更新我的博客主题所以重构了很多内容，其中包括 gitalk。但是在部署完博客后发现使用文章下 gitalk 进行授权登录时报 403 错误。
解决
参考方法：https://cuiqingcai.com/30010.html

主
                            
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2024-04-16
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-bookmark fa-fw icon-category"></i>
                                
                                <a href="/categories/Daily/" class="post-category">
                                    Daily
                                </a>
                                
                                
                            </span>
                        </div>
                    </div>

                    
                    <div class="card-action article-tags">
                        
                        <a href="/tags/%E9%85%8D%E7%BD%AE/">
                            <span class="chip bg-color">配置</span>
                        </a>
                        
                        <a href="/tags/Daily/">
                            <span class="chip bg-color">Daily</span>
                        </a>
                        
                    </div>
                    
                </div>
            </div>
            
            <div class="article col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="/2024/04/16/notion/9cb282a6255f4e5/">
                        <div class="card-image">
                            
                            <img src="https://cn.bing.com/th?id=OHR.GrandCanyonWinter_ZH-CN2640803517_1920x1080.jpg" class="responsive-img" alt="💟 汪汪2024周刊 001期：女性话语权">
                            
                            <span class="card-title">💟 汪汪2024周刊 001期：女性话语权</span>
                        </div>
                    </a>

                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            
                            Hello，大家好，这里是阿汪同学｜本期关键词： 桂花乌龙前提‼️ 本周刊非纯技术周刊，包括各方面的分享和碎碎念。
有趣的
成功第二次水光针
这月打针 ✅
成功更新了本博客的主题风格，看着这么好看的博客后面要多多输出呀

工具
中文播客网：
                            
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2024-04-16
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-bookmark fa-fw icon-category"></i>
                                
                                <a href="/categories/%E5%91%A8%E5%88%8A/" class="post-category">
                                    周刊
                                </a>
                                
                                
                            </span>
                        </div>
                    </div>

                    
                    <div class="card-action article-tags">
                        
                        <a href="/tags/%E6%AF%8F%E5%91%A8%E5%88%86%E4%BA%AB/">
                            <span class="chip bg-color">每周分享</span>
                        </a>
                        
                    </div>
                    
                </div>
            </div>
            
            <div class="article col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="/2024/04/12/notion/4d54c7a3a5144ce/">
                        <div class="card-image">
                            
                            <img src="https://images.unsplash.com/photo-1545344262-82978a5099f6?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb" class="responsive-img" alt="▪️ 用Notion Collector快捷摘录网页内容到自己的Notion吧！">
                            
                            <span class="card-title">▪️ 用Notion Collector快捷摘录网页内容到自己的Notion吧！</span>
                        </div>
                    </a>

                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            
                            
‼️ 本插件目前仅支持 Chrome（谷歌浏览器）v115 以上使用！

背景
因为在日常的工作学习中经常需要看一些技术文章，官方文档或者 Bug 解决方法文章，原来也一直在使用 Notion 出的 Notion Web Clipper 
                            
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2024-04-12
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-bookmark fa-fw icon-category"></i>
                                
                                <a href="/categories/%E5%BC%80%E5%8F%91/" class="post-category">
                                    开发
                                </a>
                                
                                
                            </span>
                        </div>
                    </div>

                    
                    <div class="card-action article-tags">
                        
                        <a href="/tags/Notion/">
                            <span class="chip bg-color">Notion</span>
                        </a>
                        
                        <a href="/tags/%E6%B5%8F%E8%A7%88%E5%99%A8%E6%8F%92%E4%BB%B6/">
                            <span class="chip bg-color">浏览器插件</span>
                        </a>
                        
                    </div>
                    
                </div>
            </div>
            
            <div class="article col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="/2024/03/05/notion/c05e50cfd8954c8/">
                        <div class="card-image">
                            
                            
                            <img src="/medias/featureimages/cover-bg-7.jpg" class="responsive-img"
                                alt="▪️ antd使用Form无法获取item数据">
                            
                            <span class="card-title">▪️ antd使用Form无法获取item数据</span>
                        </div>
                    </a>

                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            
                            问题：在使用 antd 开发过程中，在使用 Form 的 validateFields 方法进行数据验证时，发现无法获取表单数据。
原因：本页面使用了多个 Form，初始化时可能会导致后置 Form 不会被初始化。
解决方法：在 form 
                            
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2024-03-05
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-bookmark fa-fw icon-category"></i>
                                
                                <a href="/categories/Daily/" class="post-category">
                                    Daily
                                </a>
                                
                                
                            </span>
                        </div>
                    </div>

                    
                    <div class="card-action article-tags">
                        
                        <a href="/tags/%E5%B0%8F%E9%97%AE%E9%A2%98/">
                            <span class="chip bg-color">小问题</span>
                        </a>
                        
                    </div>
                    
                </div>
            </div>
            
            <div class="article col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="/2024/01/17/notion/4dd1644cb9064e4/">
                        <div class="card-image">
                            
                            
                            <img src="/medias/featureimages/cover-bg-5.jpg" class="responsive-img"
                                alt="▪️ Slack App开发记录">
                            
                            <span class="card-title">▪️ Slack App开发记录</span>
                        </div>
                    </a>

                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            
                            
使用 ngrok，它可为在计算机上本地打开的端口创建外部可寻址 URL。
在 Slack 内创建 Ap

创建 Slack 工作区
创建一个新的Slack 应用程序：「Create New Ap」，选择 From scratch。
   
                            
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2024-01-17
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-bookmark fa-fw icon-category"></i>
                                
                                <a href="/categories/%E5%BC%80%E5%8F%91/" class="post-category">
                                    开发
                                </a>
                                
                                
                            </span>
                        </div>
                    </div>

                    
                    <div class="card-action article-tags">
                        
                        <a href="/tags/Slack/">
                            <span class="chip bg-color">Slack</span>
                        </a>
                        
                    </div>
                    
                </div>
            </div>
            
            <div class="article col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="/2024/01/06/notion/ac3f15468e4443c/">
                        <div class="card-image">
                            
                            <img src="https://www.notion.so/images/page-cover/met_winslow_homer_maine_coast.jpg" class="responsive-img" alt="💘 再见2023，当时只道是寻常">
                            
                            <span class="card-title">💘 再见2023，当时只道是寻常</span>
                        </div>
                    </a>

                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            
                            〉》〉》 坚持就是胜利 ✌️！
工作&amp;学习
💡 经历了差不多一年半居家办公的日子，很轻松是真的，很焦虑和懒散也是真的。焦虑的是工作并不多，懒散的是就是这么不是很饱和的情况下也没有多学习。

爱好今年粉丝也涨了几万了，相关收入居然 
                            
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2024-01-06
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-bookmark fa-fw icon-category"></i>
                                
                                <a href="/categories/%E9%9A%8F%E7%AC%94/" class="post-category">
                                    随笔
                                </a>
                                
                                
                            </span>
                        </div>
                    </div>

                    
                    <div class="card-action article-tags">
                        
                        <a href="/tags/%E5%A4%8D%E7%9B%98/">
                            <span class="chip bg-color">复盘</span>
                        </a>
                        
                    </div>
                    
                </div>
            </div>
            
            <div class="article col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="/2023/08/12/notion/ef7e5152eeb54d2/">
                        <div class="card-image">
                            
                            
                            <img src="/medias/featureimages/cover-bg-5.jpg" class="responsive-img"
                                alt="⚫ React Hooks 精进 18 - 服务器端组件">
                            
                            <span class="card-title">⚫ React Hooks 精进 18 - 服务器端组件</span>
                        </div>
                    </a>

                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            
                            React 17渐进升级React 17 带来的渐进升级提供了一种新方案，渐进升级的支持就是一个应用可以同时由多个 React 版本。
新的事件模型react 中所有的事件都是合成事件，实现的机制是在根节点上监听所有事件，经过 react 
                            
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2023-08-12
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-bookmark fa-fw icon-category"></i>
                                
                                <a href="/categories/React/" class="post-category">
                                    React
                                </a>
                                
                                
                            </span>
                        </div>
                    </div>

                    
                    <div class="card-action article-tags">
                        
                        <a href="/tags/React/">
                            <span class="chip bg-color">React</span>
                        </a>
                        
                    </div>
                    
                </div>
            </div>
            
            <div class="article col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="/2023/08/12/notion/17368c143e824ed/">
                        <div class="card-image">
                            
                            
                            <img src="/medias/featureimages/cover-bg-1.jpg" class="responsive-img"
                                alt="⚫ React Hooks 精进 17 - 单元测试 &amp; 常用的第三方工具库">
                            
                            <span class="card-title">⚫ React Hooks 精进 17 - 单元测试 &amp; 常用的第三方工具库</span>
                        </div>
                    </a>

                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            
                            单元测试使用 Jest 和 React Testing Library 进行单元测试JestFacebook 推出的 js 但愿测试框架，零配置就能提供并发测试，测试覆盖率，Mock 工具，断言 API 等。

Jest 从哪里寻找测试文件
                            
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2023-08-12
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-bookmark fa-fw icon-category"></i>
                                
                                <a href="/categories/React/" class="post-category">
                                    React
                                </a>
                                
                                
                            </span>
                        </div>
                    </div>

                    
                    <div class="card-action article-tags">
                        
                        <a href="/tags/React/">
                            <span class="chip bg-color">React</span>
                        </a>
                        
                    </div>
                    
                </div>
            </div>
            
            <div class="article col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="/2023/08/09/notion/d87352fa777e4ee/">
                        <div class="card-image">
                            
                            
                            <img src="/medias/featureimages/cover-bg-6.jpg" class="responsive-img"
                                alt="⚫ React Hooks 精进 16 - 打包部署">
                            
                            <span class="card-title">⚫ React Hooks 精进 16 - 打包部署</span>
                        </div>
                    </a>

                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            
                            了解 Webpack通常在实际开发中我们不需要太关注源代码是通过什么编译器如何打包成最后的应用程序的，因为 IDE 已经帮我们把这些都做好了。
但是我们需要知道它的主要功能，以及能够排查问题。

Failed to compile：编译阶段
                            
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2023-08-09
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-bookmark fa-fw icon-category"></i>
                                
                                <a href="/categories/React/" class="post-category">
                                    React
                                </a>
                                
                                
                            </span>
                        </div>
                    </div>

                    
                    <div class="card-action article-tags">
                        
                        <a href="/tags/React/">
                            <span class="chip bg-color">React</span>
                        </a>
                        
                    </div>
                    
                </div>
            </div>
            
            <div class="article col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="/2023/08/09/notion/e3767b97b5ac41c/">
                        <div class="card-image">
                            
                            
                            <img src="/medias/featureimages/cover-bg-3.jpg" class="responsive-img"
                                alt="⚫ React Hooks 精进 15 - 按需加载">
                            
                            <span class="card-title">⚫ React Hooks 精进 15 - 按需加载</span>
                        </div>
                    </a>

                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            
                            
控制整个应用的大小，提高加载性能是前端开发需要的挑战。

提高首屏加载速度：

对应用分包
采用高效的缓存策略

实现按需加载使用 import 语句，定义按需加载的起始模块本质在于，需要有动态加载模块的能力——import（ECMA S
                            
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2023-08-09
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-bookmark fa-fw icon-category"></i>
                                
                                <a href="/categories/React/" class="post-category">
                                    React
                                </a>
                                
                                
                            </span>
                        </div>
                    </div>

                    
                    <div class="card-action article-tags">
                        
                        <a href="/tags/React/">
                            <span class="chip bg-color">React</span>
                        </a>
                        
                    </div>
                    
                </div>
            </div>
            
            <div class="article col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="/2023/08/09/notion/f5c52bc4bd8d4a1/">
                        <div class="card-image">
                            
                            
                            <img src="/medias/featureimages/cover-bg-3.jpg" class="responsive-img"
                                alt="🆕 在js内用文本内容定位DOM元素">
                            
                            <span class="card-title">🆕 在js内用文本内容定位DOM元素</span>
                        </div>
                    </a>

                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            
                            
在开发中遇到了一个需求：在 url 内输入页面上的按钮 label 就可以触发按钮的点击事件。

此时就需要用文本内容来定位页面上的DOM元素。
1. 遍历法遍历页面上所有的相关元素。
Array.from(document.queryS
                            
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2023-08-09
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-bookmark fa-fw icon-category"></i>
                                
                                <a href="/categories/Daily/" class="post-category">
                                    Daily
                                </a>
                                
                                
                            </span>
                        </div>
                    </div>

                    
                    <div class="card-action article-tags">
                        
                        <a href="/tags/Javascript/">
                            <span class="chip bg-color">Javascript</span>
                        </a>
                        
                    </div>
                    
                </div>
            </div>
            
            <div class="article col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="/2023/08/08/notion/8f2c2dc346234e5/">
                        <div class="card-image">
                            
                            
                            <img src="/medias/featureimages/cover-bg-8.jpg" class="responsive-img"
                                alt="⚫ React Hooks 精进 14 - 浮动层的使用 &amp; 路由管理">
                            
                            <span class="card-title">⚫ React Hooks 精进 14 - 浮动层的使用 &amp; 路由管理</span>
                        </div>
                    </a>

                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            
                            浮动层的使用通常的对话框使用：

对话框需要在父组件中声明，才能在子组件中控制是否显示。
给对话框传递参数智能由 props 传入，意味着所有状态管理需要在更高级别的组件上。

处理对话框的误区当这里是一个左右分栏布局的页面，在左侧的菜单栏
                            
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2023-08-08
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-bookmark fa-fw icon-category"></i>
                                
                                <a href="/categories/React/" class="post-category">
                                    React
                                </a>
                                
                                
                            </span>
                        </div>
                    </div>

                    
                    <div class="card-action article-tags">
                        
                        <a href="/tags/React/">
                            <span class="chip bg-color">React</span>
                        </a>
                        
                    </div>
                    
                </div>
            </div>
            
            <div class="article col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="/2023/08/06/notion/cd92524243e3431/">
                        <div class="card-image">
                            
                            
                            <img src="/medias/featureimages/cover-bg-7.jpg" class="responsive-img"
                                alt="⚫ React Hooks 精进 13 - Hooks给Form带来的新变化">
                            
                            <span class="card-title">⚫ React Hooks 精进 13 - Hooks给Form带来的新变化</span>
                        </div>
                    </a>

                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            
                            在表单中使用 React 组件：受控组件和非受控组件非受控组件：表单元素的值不是由副组件决定的，是完全内部的状态
通过非受控组件的方式，可以避免某些程度上的组件重复渲染导致的性能问题，但是无法对外有交互。
使用 Hooks 简化表单处理维护
                            
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2023-08-06
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-bookmark fa-fw icon-category"></i>
                                
                                <a href="/categories/React/" class="post-category">
                                    React
                                </a>
                                
                                
                            </span>
                        </div>
                    </div>

                    
                    <div class="card-action article-tags">
                        
                        <a href="/tags/React/">
                            <span class="chip bg-color">React</span>
                        </a>
                        
                    </div>
                    
                </div>
            </div>
            
            <div class="article col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="/2023/08/06/notion/77392cbf81de473/">
                        <div class="card-image">
                            
                            
                            <img src="/medias/featureimages/cover-bg-4.jpg" class="responsive-img"
                                alt="⚫ React Hooks 精进 12 - 项目结构：按领域组织文件夹结构">
                            
                            <span class="card-title">⚫ React Hooks 精进 12 - 项目结构：按领域组织文件夹结构</span>
                        </div>
                    </a>

                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            
                            在实际开发中，关键在于：每增加一个新的功能，整个应用程序的复杂度不应该明显上升，这样才能保证应用程序始终可扩展，可维护。
软件复杂度的根源：复杂的依赖关系按领域组织文件夹结构通常在开发中会从技术角度对文件夹进行拆分，而不是按照业务功能组织在
                            
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2023-08-06
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-bookmark fa-fw icon-category"></i>
                                
                                <a href="/categories/React/" class="post-category">
                                    React
                                </a>
                                
                                
                            </span>
                        </div>
                    </div>

                    
                    <div class="card-action article-tags">
                        
                        <a href="/tags/React/">
                            <span class="chip bg-color">React</span>
                        </a>
                        
                    </div>
                    
                </div>
            </div>
            
            <div class="article col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="/2023/08/05/notion/f92c3fdaf36c4ac/">
                        <div class="card-image">
                            
                            
                            <img src="/medias/featureimages/cover-bg-1.jpg" class="responsive-img"
                                alt="⚫ React Hooks 精进 11 - 创建自定义事件">
                            
                            <span class="card-title">⚫ React Hooks 精进 11 - 创建自定义事件</span>
                        </div>
                    </a>

                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            
                            props 是组件之间通信的基础。
在 React 中使用原生事件React 原生事件的原理：合成事件由于虚拟 DOM 的存在，在 React 中即使绑定一个事件到原生的 DOM 节点，事件也并不是绑定在对应的节点上，而是所有的事件都是绑定
                            
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2023-08-05
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-bookmark fa-fw icon-category"></i>
                                
                                <a href="/categories/React/" class="post-category">
                                    React
                                </a>
                                
                                
                            </span>
                        </div>
                    </div>

                    
                    <div class="card-action article-tags">
                        
                        <a href="/tags/React/">
                            <span class="chip bg-color">React</span>
                        </a>
                        
                    </div>
                    
                </div>
            </div>
            
            <div class="article col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="/2023/08/05/notion/d51b780992d6450/">
                        <div class="card-image">
                            
                            
                            <img src="/medias/featureimages/cover-bg-6.jpg" class="responsive-img"
                                alt="⚫ React Hooks 精进 10 - 函数组件设计模式">
                            
                            <span class="card-title">⚫ React Hooks 精进 10 - 函数组件设计模式</span>
                        </div>
                    </a>

                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            
                            函数组件设计模式保证状态的唯一数据源，语义化的拆分复杂组件都是一些设计模式。
容器模式：实现按条件执行 Hooks注意点：Hooks 必须在顶层作用域调用（因为 React 需要在函数组件内部维护所用到的 Hooks 的状态）。
比如有一个
                            
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2023-08-05
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-bookmark fa-fw icon-category"></i>
                                
                                <a href="/categories/React/" class="post-category">
                                    React
                                </a>
                                
                                
                            </span>
                        </div>
                    </div>

                    
                    <div class="card-action article-tags">
                        
                        <a href="/tags/React/">
                            <span class="chip bg-color">React</span>
                        </a>
                        
                    </div>
                    
                </div>
            </div>
            
            <div class="article col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="/2023/07/27/notion/86b2af186c26415/">
                        <div class="card-image">
                            
                            
                            <img src="/medias/featureimages/cover-bg-8.jpg" class="responsive-img"
                                alt="⚫ Chapter 1">
                            
                            <span class="card-title">⚫ Chapter 1</span>
                        </div>
                    </a>

                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            
                            undefined

                            
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2023-07-27
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-bookmark fa-fw icon-category"></i>
                                
                                <a href="/categories/%E6%97%A5%E8%AF%AD%E5%88%9D%E7%BA%A7/" class="post-category">
                                    日语初级
                                </a>
                                
                                
                            </span>
                        </div>
                    </div>

                    
                    <div class="card-action article-tags">
                        
                        <a href="/tags/%E6%97%A5%E8%AF%AD/">
                            <span class="chip bg-color">日语</span>
                        </a>
                        
                    </div>
                    
                </div>
            </div>
            
        </div>
    </article>

</main>


<div class="container paging">
    <div class="row">
        <div class="col s6 m4 l4">
            
            <a class="left btn-floating btn-large disabled">
                <i class="fas fa-angle-left"></i>
            </a>
            
        </div>
        <div class="page-info col m4 l4 hide-on-small-only">
            <div class="center-align b-text-gray">1 / 6</div>
        </div>
        <div class="col s6 m4 l4">
            
            <a href="/page/2/"
               class="right btn-floating btn-large waves-effect waves-light bg-color">
                <i class="fas fa-angle-right"></i>
            </a>
            
        </div>
    </div>
</div>



    <footer class="page-footer bg-color">
    
    <div class="container row center-align" style="margin-bottom: 0px !important;">
        <div class="col s12 m8 l8 copy-right">
            Copyright&nbsp;&copy;
            
                <span id="year">2019-2024</span>
            
            <span id="year">2019</span>
            <a href="/about" target="_blank">阿汪同学</a>
            
            
            
            
            
            
            <span id="busuanzi_container_site_pv">
                |&nbsp;<i class="far fa-eye"></i>&nbsp;总访问量:&nbsp;<span id="busuanzi_value_site_pv"
                    class="white-color"></span>&nbsp;次
            </span>
            
            
            <span id="busuanzi_container_site_uv">
                |&nbsp;<i class="fas fa-users"></i>&nbsp;总访问人数:&nbsp;<span id="busuanzi_value_site_uv"
                    class="white-color"></span>&nbsp;人
            </span>
            
            <br>
            
            <br>
            
        </div>
        <div class="col s12 m4 l4 social-link social-statis">
    <a href="https://github.com/httIsHere" class="tooltipped" target="_blank" data-tooltip="访问我的GitHub" data-position="top" data-delay="50">
        <i class="fab fa-github"></i>
    </a>



    <a href="mailto:httishere0728@gmail.com" class="tooltipped" target="_blank" data-tooltip="邮件联系我" data-position="top" data-delay="50">
        <i class="fas fa-envelope-open"></i>
    </a>













</div>
    </div>
</footer>

<div class="progress-bar"></div>


    <!-- 搜索遮罩框 -->
<div id="searchModal" class="modal">
    <div class="modal-content">
        <div class="search-header">
            <span class="title"><i class="fas fa-search"></i>&nbsp;&nbsp;搜索</span>
            <input type="search" id="searchInput" name="s" placeholder="请输入搜索的关键字"
                   class="search-input">
        </div>
        <div id="searchResult"></div>
    </div>
</div>

<script type="text/javascript">
$(function () {
    var searchFunc = function (path, search_id, content_id) {
        'use strict';
        $.ajax({
            url: path,
            dataType: "xml",
            success: function (xmlResponse) {
                // get the contents from search data
                var datas = $("entry", xmlResponse).map(function () {
                    return {
                        title: $("title", this).text(),
                        content: $("content", this).text(),
                        url: $("url", this).text()
                    };
                }).get();
                var $input = document.getElementById(search_id);
                var $resultContent = document.getElementById(content_id);
                $input.addEventListener('input', function () {
                    var str = '<ul class=\"search-result-list\">';
                    var keywords = this.value.trim().toLowerCase().split(/[\s\-]+/);
                    $resultContent.innerHTML = "";
                    if (this.value.trim().length <= 0) {
                        return;
                    }
                    // perform local searching
                    datas.forEach(function (data) {
                        var isMatch = true;
                        var data_title = data.title.trim().toLowerCase();
                        var data_content = data.content.trim().replace(/<[^>]+>/g, "").toLowerCase();
                        var data_url = data.url;
                        data_url = data_url.indexOf('/') === 0 ? data.url : '/' + data_url;
                        var index_title = -1;
                        var index_content = -1;
                        var first_occur = -1;
                        // only match artiles with not empty titles and contents
                        if (data_title !== '' && data_content !== '') {
                            keywords.forEach(function (keyword, i) {
                                index_title = data_title.indexOf(keyword);
                                index_content = data_content.indexOf(keyword);
                                if (index_title < 0 && index_content < 0) {
                                    isMatch = false;
                                } else {
                                    if (index_content < 0) {
                                        index_content = 0;
                                    }
                                    if (i === 0) {
                                        first_occur = index_content;
                                    }
                                }
                            });
                        }
                        // show search results
                        if (isMatch) {
                            str += "<li><a href='" + data_url + "' class='search-result-title'>" + data_title + "</a>";
                            var content = data.content.trim().replace(/<[^>]+>/g, "");
                            if (first_occur >= 0) {
                                // cut out 100 characters
                                var start = first_occur - 20;
                                var end = first_occur + 80;
                                if (start < 0) {
                                    start = 0;
                                }
                                if (start === 0) {
                                    end = 100;
                                }
                                if (end > content.length) {
                                    end = content.length;
                                }
                                var match_content = content.substr(start, end);
                                // highlight all keywords
                                keywords.forEach(function (keyword) {
                                    var regS = new RegExp(keyword, "gi");
                                    match_content = match_content.replace(regS, "<em class=\"search-keyword\">" + keyword + "</em>");
                                });

                                str += "<p class=\"search-result\">" + match_content + "...</p>"
                            }
                            str += "</li>";
                        }
                    });
                    str += "</ul>";
                    $resultContent.innerHTML = str;
                });
            }
        });
    };

    searchFunc('/search.xml', 'searchInput', 'searchResult');
});
</script>

    <!-- 回到顶部按钮 -->
<div id="backTop" class="top-scroll">
    <a class="btn-floating btn-large waves-effect waves-light" href="#!">
        <i class="fas fa-arrow-up"></i>
    </a>
</div>


    <script src="/libs/materialize/materialize.min.js"></script>
    <script src="/libs/masonry/masonry.pkgd.min.js"></script>
    <script src="/libs/aos/aos.js"></script>
    <script src="/libs/scrollprogress/scrollProgress.min.js"></script>
    <script src="/libs/lightGallery/js/lightgallery-all.min.js"></script>
    <script src="/js/matery.js"></script>

    <!-- Baidu Analytics -->

    <!-- Baidu Push -->

<script>
    (function () {
        var bp = document.createElement('script');
        var curProtocol = window.location.protocol.split(':')[0];
        if (curProtocol === 'https') {
            bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
        } else {
            bp.src = 'http://push.zhanzhang.baidu.com/push.js';
        }
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(bp, s);
    })();
</script>

    
    
    <script async src="/libs/others/busuanzi.pure.mini.js"></script>
    

    

    

	
    

    

    

    
    <script src="/libs/instantpage/instantpage.js" type="module"></script>
    

</body>

</html>
